<template>
  <div>
    <Add ref="add" @ok="search"></Add>
    <ZgNewPage
      ref="page"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :extraBtns="extraBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="240"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
      @extra="toExtra"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h,i) in headers"
          :key="`column${i}`"
          :width="h.width===0 ? 'auto' : h.width"
          align="center"
          :title="h.label">
          <template slot-scope="record">
            {{ record[h.code] }}
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import Add from './Add'
export default {
  components: {
    Add
  },
  data () {
    return {
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: true,
        showHeaderConfig: true,
        showAttachBtn: false
      },
      conditions: [
        { code: 'name1', compType: '单行文本', label: '级别名称', defaultVal: '', extra: { placeholder: '请输入级别名称' } }
      ],
      headers: [
        { code: '1', label: '级别名称', isShow: true, sort: 0 },
        { code: '2', label: '分数范围（大于等于）', isShow: true, sort: 0 }
      ],
      dataBtns: [
        { key: 1, name: '删除', type: 'link', isShow: () => { return true } },
        { key: 2, name: '上移', type: 'link', isShow: () => { return true } },
        { key: 3, name: '下移', type: 'link', isShow: () => { return true } }
      ],
      extraBtns: [
        { key: 1, name: '新增', icon: 'plus-circle', type: 'primary' }
      ],
      tableData: []
    }
  },
  methods: {
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      if (this.tableData.length === 0) {
        this.tableData = [
          { key: '1', id: '1', '1': '优质户', '2': '90' },
          { key: '2', id: '2', '1': '良好户', '2': '80' }
        ]
      }
      this.$refs.page.endSearch({
        total: this.tableData.length,
        list: this.tableData
      })
    },
    toAdmin (opt) {
      if (opt.key === 1) {
        // 删除
        this.confirm(
          () => {
            const index = this.tableData.findIndex(item => item.id === opt.obj.id)
            if (index > -1) {
              this.tableData.splice(index, 1)
              this.refreshTable()
            }
          },
          '确定要删除这条数据么'
        )
      } else if (opt.key === 2) {
        // 上移
        this.moveUp(opt.obj)
      } else if (opt.key === 3) {
        // 下移
        this.moveDown(opt.obj)
      }
    },
    toExtra (opt) {
      this.$refs.add.open()
    },
    onFilter (f, param) {
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    },
    // 上移
    moveUp (item) {
      const index = this.tableData.findIndex(data => data.id === item.id)
      if (index > 0) {
        // 交换当前项和上一项的位置
        const temp = this.tableData[index]
        this.$set(this.tableData, index, this.tableData[index - 1])
        this.$set(this.tableData, index - 1, temp)
        this.refreshTable()
      } else {
        this.$message.warning('已经是第一条数据，无法上移')
      }
    },
    // 下移
    moveDown (item) {
      const index = this.tableData.findIndex(data => data.id === item.id)
      if (index < this.tableData.length - 1) {
        // 交换当前项和下一项的位置
        const temp = this.tableData[index]
        this.$set(this.tableData, index, this.tableData[index + 1])
        this.$set(this.tableData, index + 1, temp)
        this.refreshTable()
      } else {
        this.$message.warning('已经是最后一条数据，无法下移')
      }
    },
    // 刷新表格
    refreshTable () {
      this.$refs.page.endSearch({
        total: this.tableData.length,
        list: this.tableData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
